<template>
  <div class="main-page">
    <PageSearch
      :search-form-config="searchFormConfig"
      :form-data.sync="formData"
      @searchBtnClick="handleSearch"
    />
    <PageContent
      ref="pageContent"
      :form-data="formData"
      :content-table-config="contentConfig"
    >
      <template #status="{row}">
        <el-tag :type="tagType(row.statusValue)">
          {{ row.statusText }}
        </el-tag>
      </template>
      <template #operate="{ row }">
        <el-button
          type="text"
          size="small"
          icon="el-icon-edit"
          @click="editOrder(row)"
        >
          编辑
        </el-button>
      </template>
    </PageContent>

    <PageModal
      :modal-form-data="modalFormData"
      :modal-form-config="modalFormConfig"
      :visible.sync="dialogVisible"
      title="编辑订单"
      :btn-loading="confirmBtnLoading"
      @confirm="handleConfirm"
    />
  </div>
</template>

<script>
import { contentConfig } from "./config/content.config";
import { searchFormConfig } from "./config/search.config";
import { modalFormConfig } from "./config/modal.config";
import { updateRepairStatus } from "@/api/repair";
export default {
  name: "RepairList",
  data() {
    return {
      contentConfig,
      searchFormConfig,
      modalFormConfig,
      btnLoading: false,
      confirmBtnLoading: false,
      dialogVisible: false,
      formData: {}, // 搜索表单数据
      modalFormData: {}, // 模态框表单数据
    };
  },
  computed:{
    tagType(){
      return (val)=>{
        switch (+val) {
          case 0:
            return "";
          case 1:
            return "success";
          case 2:
            return "info";
          default:
            return "info";
        }
      }
    }
  },
  methods: {
    handleSearch() {
      this.$refs.pageContent.queryTblMain();
    },
    editOrder(row) {
      row.statusValue = +row.statusValue;
      this.dialogVisible = true;
      this.modalFormData = { ...this.modalFormData, ...row };
    },
    handleConfirm(data) {
      this.confirmBtnLoading = true;
      const params = { ...this.modalFormData, ...data };
      params.status=params.statusValue;
      updateRepairStatus(params)
        .then(() => {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.$refs.pageContent.queryTblMain();
        })
        .finally(() => {
          this.confirmBtnLoading = false;
          this.dialogVisible = false;
        });
    },
  },
};
</script>
